<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file" id="file">
    <img src="" alt="" id="img">
    <script>
        let img = document.querySelector("#img")
        let fr = new FileReader()
        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
        document.querySelector("#file").addEventListener('change', (evt) => {
            let file = evt.target.files[0]
            fr.readAsDataURL(file)
            fr.onload = function (evt) {
                let imageString = evt.target.result;

                //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
                var windowURL = window.URL || window.webkitURL;
                //createObjectURL创建一个指向该参数对象(图片)的URL
                var dataURL = windowURL.createObjectURL(dataURLtoBlob(imageString));
                img.setAttribute('src', dataURL)
            }
        })


    </script>
</body>

</html>